var app;

jQuery(document).ready(function(){
	app = new Vue({
        el: '#app',
        data: {
        	tableName : '',
        	currentTab : '0',
        	tableStructureColumns : [ {
        		title : '列名',
        		key : 'columnName',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('Input',{
        					props : {
        						type : 'text',
        						size : 'default',
        						value : params.row.columnName
        					},
        					on : {
        						'on-blur' : function(event){
        							app.tableStructureData[index].columnName = event.currentTarget.value;
        						}
        					}
        				});
        			}else{
        				html = params.row.columnName;
        			}
        			return html;
        		}
        	},{
        		title : '数据类型',
        		key : 'dataType',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('Input',{
        					props : {
        						type : 'text',
        						size : 'default',
        						value : params.row.dataType
        					},
        					on : {
        						'on-blur' : function(event){
        							app.tableStructureData[index].dataType = event.currentTarget.value;
        						}
        					}
        				});
        			}else{
        				html = params.row.dataType;
        			}
        			return html;
        		}
        	},{
        		title : '长度',
        		key : 'length',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('Input',{
        					props : {
        						type : 'text',
        						size : 'default',
        						value : params.row.length
        					},
        					on : {
        						'on-blur' : function(event){
        							app.tableStructureData[index].length = event.currentTarget.value;
        						}
        					}
        				});
        			}else{
        				html = params.row.length;
        			}
        			return html;
        		}
        	},{
        		title : '小数长度',
        		key : 'doubleLength',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('Input',{
        					props : {
        						type : 'text',
        						size : 'default',
        						value : params.row.doubleLength
        					},
        					on : {
        						'on-blur' : function(event){
        							app.tableStructureData[index].doubleLength = event.currentTarget.value;
        						}
        					}
        				});
        			}else{
        				html = params.row.doubleLength;
        			}
        			return html;
        		}
        	},{
        		title : '是否为空',
        		key : 'isNull',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('i-switch',{
        					props : {
        						value : params.row.isNull
        					},
        					on : {
        						'on-change' : function(status){
        							app.tableStructureData[index].isNull = status;
        						}
        					}
        				});
        			}else{
        				var colorCode = params.row.isNull ? 'blue' : 'default';
        				html = h('Tag', {
                            props: {
                                type: 'dot',
                                color: colorCode
                            }
                        });
        			}
        			return html;
        		}
        	},{
        		title : '主键',
        		key : 'isPk',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('i-switch',{
        					props : {
        						value : params.row.isPk
        					},
        					on : {
        						'on-change' : function(status){
        							app.tableStructureData[index].isPk = status;
        						}
        					}
        				});
        			}else{
        				var colorCode = params.row.isPk ? 'blue' : 'default';
        				html = h('Tag', {
                            props: {
                                type: 'dot',
                                color: colorCode
                            }
                        });
        			}
        			return html;
        		}
        	},{
        		title : '默认值',
        		key : 'defaultValue',
        		render : function(h, params){
        			var html = "";
        			var isEdit = params.row.isEdit;
        			if(isEdit){
        				var index = params.index;
        				html = h('Input',{
        					props : {
        						type : 'text',
        						size : 'default',
        						value : params.row.defaultValue
        					},
        					on : {
        						'on-blur' : function(event){
        							app.tableStructureData[index].defaultValue = event.currentTarget.value;
        						}
        					}
        				});
        			}else{
        				html = params.row.defaultValue;
        			}
        			return html;
        		}
        	},{
        		title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: function(h, params){
                	var action = null;
                	var isEdit = params.row.isEdit;
                	var index = params.index;
                	if(isEdit){
                		action = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            on: {
                                click : function(){
                                	app.tableStructureData[index].isEdit = false;
                                }
                            }
                        }, '保存');
                	}else{
                		action = h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function(){
                                	app.tableStructureData.splice(index, 1);
                                }
                            }
                        }, '删除');
                	}
                    return h('div', [
                        action
                    ]);
                }
        	} ],
        	tableStructureData : [ ]
        },
        methods: {
            addRow : function(){
            	if('0' == this.currentTab){
            		this.tableStructureData.push({
            			isEdit : true,
            			columnName : '',
            			dataType : '',
            			length : '',
            			doubleLength : '',
            			isNull : true,
            			isPk : false,
            			defaultValue : ''
            		});
            	}
            },
            editRow : function(data,index){
            	app.tableStructureData[index].isEdit = true;
            },
            searchStructuure : function(){
            	var url = "/mobile/plugin/westvalley/tools/xEdiTable/jsp/ajaxSearchTableStructure.jsp";
            	var data = {
            		tableName : this.tableName
            	};
            	var o = ajaxJson(url,data);
            	if(o){
            		if(!o.flag){
            			this.$Message.error(o.msg);
            		}
            		this.tableStructureData = o.data;
            	}
            }
        },
        created: function(){
        	
        }
    });
});

/**
 * 异步提交
 * @param url
 * @param data
 * @returns json
 */
function ajaxJson(url, data) {
	var datas = "";
	jQuery.ajax({
		type : "POST",
		url : url,
		data : data,
		dataType : "json",
		async : false,
		success : function(data) {
			datas = data;
		},
		error: function(x,msg){
			alert(msg);
		}
	});
	return datas;
}

/**
 * 异步提交
 * @param url
 * @param data
 * @returns json
 */
function ajaxText(url, data) {
	var datas = "";
	jQuery.ajax({
		type : "POST",
		url : url,
		data : data,
		dataType : "text",
		async : false,
		success : function(data) {
			datas = data;
		},
		error: function(x,msg){
			alert(msg);
		}
	});
	return datas;
}